<template>
  <div class="flexMainBetween row2">
    <!-- 类型 -->
    <div class="tabs">
      <div :class="['tab', { 'act': activeType == item.id }]" v-for="item in typeList" :key="item.id"
        @click="changeType(item.id)">
        <p>{{ item.name }}</p>
        <div class="act_line"></div>
      </div>
    </div>
    <!-- <div class="flexCrossCenter">
      <span class="onlyReadLabel">只看未读</span>
      <van-switch v-model="art.checked" @change="filterFun"></van-switch>
    </div> -->
  </div>
  <van-list class="listView" v-model:loading="loading" :finished="finished" :finished-text="noMoreStr" @load="onLoad">
    <div :class="['li', item.type]" v-for="(item, i) in list" :key="item.id" @click="goToDetail(item)">
      <div class="flexMainBetween info_bar">
        <div class="flexCrossCenter type">
          <div class="tIcon"></div>{{ item.type == 'injury' ? '伤停' :'情报'}}
        </div>
        <p class="date" v-if="item.date">{{ transDateWeek(item.date) }}</p>
        <router-link class="flexCrossCenter viewMore" :to="`/detail/${item.type}/${item.id}`">
          <span>查看详情</span>
          <van-icon name="arrow" />
        </router-link>
      </div>
      <p class="desc ell">{{ item.title }}</p>
    </div>
    <van-empty description="暂无数据" v-if="!loading && list.length == 0" />
  </van-list>
</template>

<script setup>
import { format } from 'date-fns';
import { articleList } from '@/api/calc';
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores'
import { getWeek } from '@/utils/calc'
import { useArtStore } from '@/stores'

const router = useRouter()
const user = useUserStore()
const art = useArtStore()
const typeList = [
  { id: 0, name: "全部", type: 'injury,intelligence' },
  { id: 1, name: "伤停", type: 'injury' },
  { id: 2, name: "情报", type: 'intelligence' },
]
const isReadArr = JSON.parse(sessionStorage.getItem("read")) || [];
const activeType = ref(0);
const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const noMoreStr = ref('');
let sourceData = [], pageIndex = 1;

function filterFun(){
  if (art.checked){
    list.value = sourceData.filter(item => !isReadArr.includes(item.id));
  }else{
    list.value = sourceData;
  }
}
function goToDetail(item){
  if (!isReadArr.some(it => it == item.id)){
    isReadArr.push(item.id);
    sessionStorage.setItem("read", JSON.stringify(isReadArr));
  }
  const path = `/detail/${item.type}/${item.id}`;
  router.push(path);
  user.log({ type: 'event', action: 'click', opt_label: `${item.type}文章详情`, target_url: path, data_id: item.id });
}
function changeType(id) {
  if (activeType.value == id) return;
  activeType.value = id;
  // 重置数据和页码
  finished.value = false;
  pageIndex = 1;
  sourceData = [];
  onLoad();
}
function transDateWeek(time){
  const millsecond = time * 1000;
  return format(millsecond, "MM/dd") +" "+ getWeek(new Date(millsecond), '星期');
}
function onLoad(){
  const findObj = typeList.find(item => item.id == activeType.value);
  // 异步更新数据
  articleList({ type: findObj.type, page: pageIndex }, pageIndex == 1).then(res => {
    const { current_page, data, last_page } = res;
    sourceData = sourceData.concat(data);
    // 数据全部加载完成
    if (current_page >= last_page) {
      finished.value = true;
      if (sourceData.length>0) noMoreStr.value = "没有更多了"
    }else{
      pageIndex++;
    }
    loading.value = false;
    filterFun();
  }).catch(() => {
    // 加载状态结束
    loading.value = false;
    finished.value = true;
  })
};
</script>

<style lang="less" scoped>
.row2 {
  padding-right: 16px;
  background-color: #fff;
  .onlyReadLabel{
    font-size: 14px;
    color: #F96235;
    margin-right: 4px;
  }
}
.tabs {
  display: flex;
  color: #1D2129;
  font-size: 15px;

  .tab {
    padding: 16px 20px;
    position: relative;
  }

  p {
    position: relative;
    z-index: 1;
    line-height: 14px;
  }

  .act_line {
    width: 40px;
    height: 4px;
    position: absolute;
    bottom: 14px;
    z-index: 0;
  }

  .act {
    p {
      font-size: 16px;
      font-weight: 900;
    }

    .act_line {
      background: linear-gradient(90deg, #f96235 0%, #ffffff 100%);
    }
  }
}
.listView{
  width: 100%;
  padding: 0 16px;
  .li{
    width: 343px;
    height: 82px;
    border-radius: 8px;
    background-color: #fff;
    margin-top: 14px;
    padding: 10px 12px;
    background-size: cover;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(183,183,183, 0.2);
  }
  .info_bar{
    .tIcon{
      width: 26px;
      height: 26px;
      border-radius: 50%;
      margin-right: 3px;
      background-size: 16px 16px;
      background-position: center;
      background-repeat: no-repeat;
    }
    .date{
      width: 90px;
      color: #1D2129;
      font-size: 14px;
    }
    .type{
      flex: 1;
      line-height: 1;
      font-size: 14px;
      color: #000;
      font-weight: 700;
    }
    .viewMore{
      flex: 1;
      line-height: 1;
      justify-content: flex-end;
      color: #86909C;
      font-size: 12px;
    }
  }
  .desc{
    text-align: center;
    margin-top: 12px;
    line-height: 26px;
    font-size: 14px;
    font-weight: 900;
    color: #141414;
  }
  .intelligence  {
    background-image: url("@/assets/img/bg_qb.png");
    .tIcon{
      background-color: #F96235;
      background-image: url("@/assets/img/qb.png");
    }
  }

  .injury {
    background-image: url("@/assets/img/bg_st.png");
    .tIcon {
      background-color: #34BFC6;
      background-image: url("@/assets/img/st.png");
    }
  }
}
</style>
